<template>
  <div class="database-monitor p-4">
    <!-- 仪表盘展示区域 -->
    <el-row :gutter="20" class="mb-6">
      <!-- 数据库连接数 -->
      <el-col :span="8">
        <div class="bg-white p-4 rounded-lg shadow-md">
          <div class="text-lg font-medium mb-4">数据库连接数</div>
          <div class="text-center mb-2">
            <div class="text-sm text-gray-600">
              当前数据库连接数: {{ stats.currentConnections }}个
            </div>
            <div class="text-sm text-gray-600"> 最大连接数: {{ stats.maxConnections }}个 </div>
          </div>
          <ArtRingChart
            :percentage="33.11"
            :color="['#67C23A', '#E6A23C', '#F56C6C']"
            :data="[
              { name: '已用', value: stats.currentConnections },
              { name: '剩余', value: stats.maxConnections - stats.currentConnections }
            ]"
          />
          <div class="text-center text-xl font-bold mt-2">33.11%</div>
        </div>
      </el-col>

      <!-- 数据库表空间(主数据) -->
      <el-col :span="8">
        <div class="bg-white p-4 rounded-lg shadow-md">
          <div class="text-lg font-medium mb-4">数据库表空间(主数据)</div>
          <div class="text-center mb-2">
            <div class="text-sm text-gray-600"> 已使用空间: {{ stats.mainDbUsed }} </div>
            <div class="text-sm text-gray-600"> 表空间总量: {{ stats.mainDbTotal }} </div>
          </div>
          <ArtRingChart
            :percentage="82.32"
            :color="['#67C23A', '#E6A23C', '#F56C6C']"
            :data="[
              { name: '已用', value: 1686 },
              { name: '剩余', value: 362 }
            ]"
          />
          <div class="text-center text-xl font-bold mt-2">82.32%</div>
        </div>
      </el-col>

      <!-- 数据库表空间(数据集成库) -->
      <el-col :span="8">
        <div class="bg-white p-4 rounded-lg shadow-md">
          <div class="text-lg font-medium mb-4">数据库表空间(数据集成库)</div>
          <div class="text-center mb-2">
            <div class="text-sm text-gray-600"> 已使用空间: {{ stats.integrationDbUsed }} </div>
            <div class="text-sm text-gray-600"> 表空间总量: {{ stats.integrationDbTotal }} </div>
          </div>
          <ArtRingChart
            :percentage="73.86"
            :color="['#67C23A', '#E6A23C', '#F56C6C']"
            :data="[
              { name: '已用', value: 16286 },
              { name: '剩余', value: 5762 }
            ]"
          />
          <div class="text-center text-xl font-bold mt-2">73.86%</div>
        </div>
      </el-col>
    </el-row>

    <!-- 监控表格区域 -->
    <div class="bg-white p-4 rounded-lg shadow-md">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="URI监控" name="uri">
          <ArtTable :data="uriData" :border="true" :stripe="true">
            <el-table-column prop="id" label="序号" width="80" />
            <el-table-column prop="uri" label="URI" />
            <el-table-column prop="requestCount" label="请求次数" width="100" />
            <el-table-column prop="avgTime" label="请求时间(ms)" width="120" />
            <el-table-column prop="maxTime" label="请求量(次/秒)" width="120" />
            <el-table-column prop="executing" label="执行中" width="80" />
            <el-table-column prop="maxThread" label="最大并发" width="100" />
            <el-table-column prop="jdbcExecuteCount" label="Jdbc执行数" width="120" />
            <el-table-column prop="jdbcFetchCount" label="Jdbc出错数" width="120" />
            <el-table-column prop="jdbcTime" label="Jdbc时间" width="100" />
            <el-table-column prop="updateCount" label="更新行数" width="100" />
            <el-table-column prop="fetchCount" label="更新行数" width="100" />
          </ArtTable>
        </el-tab-pane>
        <el-tab-pane label="Spring监控" name="spring">
          <ArtTable :data="springData" :border="true" :stripe="true">
            <!-- Spring监控表格列配置与URI监控相同 -->
          </ArtTable>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'

  // 页面状态
  const activeTab = ref('uri')

  // 统计数据
  const stats = reactive({
    currentConnections: 50,
    maxConnections: 151,
    mainDbUsed: '1686M',
    mainDbTotal: '2048M',
    integrationDbUsed: '16286M',
    integrationDbTotal: '22048M'
  })

  // URI监控数据
  const uriData = ref([
    {
      id: 1,
      uri: '/share/getExplainByFWID',
      requestCount: 7,
      avgTime: 158,
      maxTime: 36,
      executing: 0,
      maxThread: 1,
      jdbcExecuteCount: 0,
      jdbcFetchCount: 0,
      jdbcTime: 0,
      updateCount: 0,
      fetchCount: 0
    }
    // ... 其他数据
  ])

  // Spring监控数据
  const springData = ref([
    // Spring监控数据结构与URI监控相同
  ])
</script>

<style scoped lang="scss">
  .database-monitor {
    .chart-wrapper {
      height: 300px;
    }
  }
</style>
